<!--纠删码配置管理-->
<template>
	<a-row>
		<a-row class='mytitle'>
			<!-- <a-icon :component = "ec"  style="margin:0 .5rem 0 0"/> -->
			{{ $t('Erasure-code') }}
		</a-row>

		<NoAuthPage v-showNoAuth="'E7-1'" />

		<div style=" padding: 20px;" v-userAuth="'E7-1'">
			<a-row :gutter="24">
				<a-col :span="8" v-userAuth="'E7-2'">
					<a-card :title="$t('Create') + $t('Erasure-config')" class="bg" :bordered=false :headStyle="tdetail"
						:bodyStyle="{ padding: ' 0 !important' }">
						<p class="cardbox" style="text-align: center;">
							<a-icon type="plus-circle" theme="filled" class="add-fill-icon" @click="openmodal('add')" />
							<!-- <img 
					ondragstart="return false"
					oncontextmenu="return false"
					src="../../../../static/images/png/ic_new.png" style="margin: 3.1rem;" @click="openmodal('add')" /> -->
						</p>
					</a-card>
				</a-col>
				<a-col :span="8" v-for="(item, index) in suredata" :key="index">
					<a-card :title="$t('Erasure-config') + ': ' + item.name" class="bg" :bordered=false :headStyle="tdetail"
						:bodyStyle="{ padding: '0 !important' }">
						<a href="#" slot="extra" v-if="item.flag != 1" v-userAuth="'E7-3'">
							<!-- <a-icon :component = "edit"  style="margin:0 1rem 0 0"/> -->
							<a-popconfirm :title="$t('Sure_confirm')" @confirm="delsure(suredata[index].name)"
								:okText="$t('Yes')" :cancelText="$t('No')">
								<a-icon slot="icon" type="question-circle-o" style="color: red" />
								<!-- <a-icon :component = "del"  style="margin:0 .5rem 0 0" /> -->
								<!-- <i class="icon icon-delete16f del-icon"></i> -->

								<Iconfont class="icon del-icon" type="icon-delete16f"></Iconfont>
							</a-popconfirm>
						</a>
						<p class="cardbox">
						<ul class="box">
							<li class="list">
								<span class="listspan">{{ $t('Plugin') }}：</span><!--插件-->
								<a-tooltip v-if="String(item.plugin).length > 12">
									<template slot="title">
										{{ item.plugin }}
									</template>
									{{ item.plugin }}
								</a-tooltip>
								<span v-else>{{ item.plugin }}</span>
							</li>
							<li class="list">
								<span class="listspan">{{ $t('Data-block') }}(k)：</span><!--数据块-->
								<a-tooltip v-if="String(item.k).length > 12">
									<template slot="title">
										{{ item.k }}
									</template>
									{{ item.k }}
								</a-tooltip>
								<span v-else>{{ item.k }}</span>
							</li>
							<li class="list">
								<span class="listspan">{{ $t('Coding-block') }}(m)：</span><!--编码块-->
								<a-tooltip v-if="String(item.m).length > 8">
									<template slot="title">
										{{ item.m }}
									</template>
									{{ item.m }}
								</a-tooltip>
								<span v-else>{{ item.m }}</span>
							</li>
							<li class="list">
								<span class="listspan">{{ $t('Failure-domain') }}：</span><!--失效域-->
								<a-tooltip v-if="String(item['crush-failure-domain']).length > 10">
									<template slot="title">
										{{ item['crush-failure-domain'] }}
									</template>
									{{ item['crush-failure-domain'] ? item['crush-failure-domain'] : '-' }}
								</a-tooltip>
								<span v-else>{{ item['crush-failure-domain'] ? item['crush-failure-domain'] : '-' }}</span>
							</li>
							<li class="list">
								<span class="listspan">{{ $t('Data-granularity') }}：</span><!--数据粒度-->
								<a-tooltip v-if="String(item.packetsize).length > 10">
									<template slot="title">
										{{ item.packetsize }}
									</template>
									{{ item.packetsize ? item.packetsize : '-' }}
								</a-tooltip>
								<span v-else>{{ item.packetsize ? item.packetsize : '-' }}</span>
							</li>
							<li class="list">
								<span class="listspan">crush-root：</span>
								<a-tooltip v-if="String(item['crush-root']).length > 10">
									<template slot="title">
										{{ item['crush-root'] }}
									</template>
									{{ item['crush-root'] ? item['crush-root'] : '-' }}
								</a-tooltip>
								<span v-else>{{ item['crush-root'] ? item['crush-root'] : '-' }}</span>
							</li>
							<li class="list">
								<span class="listspan">{{ $t('Storage-device-type') }}：</span><!--存储设备类型-->
								<a-tooltip v-if="String(item['crush-device-class']).length > 10">
									<template slot="title">
										{{ item['crush-device-class'] }}
									</template>
									{{ item['crush-device-class'] ? item['crush-device-class'] : '-' }}
								</a-tooltip>
								<span v-else>{{ item['crush-device-class'] ? item['crush-device-class'] : '-' }}</span>
							</li>
						</ul>
						</p>
					</a-card>
				</a-col>
			</a-row>
		</div>

		<!-- 创建纠删码配置 -->
		<a-modal :title="$t('Create') + $t('Erasure-config')" v-model="add" @cancel='cancelhandle' width='35%' @ok='btnsub'
			:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form'>
				<a-form-item :label="$t('Configuration') + $t('Name')" v-bind='formlayout'>
					<a-input v-decorator="['name', {
						rules: [{ required: true, message: $t('Enter') + $t('Configuration') + $t('Name') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }]
					}]" style="width: 100%;" :placeholder="$t('Enter') + $t('Configuration') + $t('Name')">
					</a-input>
				</a-form-item>
				<a-form-item :label="$t('Plugin') + $t('Name')" v-bind='formlayout'>
					<a-select v-decorator="['plugin', {
						rules: [{ required: true, message: $t('Choose') + $t('Plugin') + $t('Name') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }]
					}]" @change="changePlugin" :placeholder="$t('Choose') + $t('Plugin') + $t('Name')">
						<!-- <a-select-option :value="item" v-for="(item,index) in basedata.plugins" :key="index">{{item}}</a-select-option> -->
						<a-select-option :value="item" v-for="(item, index) in pluginNames" :key="index">{{ item
						}}</a-select-option>
					</a-select>
				</a-form-item>
				<!-- 数据块 -->
				<a-form-item :label="$t('Data-block') + '(k)'" v-bind='formlayout'>
					<a-input-number v-decorator="['k', {
						rules: [{ required: true, message: $t('Enter') + $t('Data-block') }]
					}]" style="width: 100%;" :min="2" :placeholder="$t('Enter') + $t('Data-block') + $t('Min-num-2')"
						@change="handleInputNumToInt('k', $event)">
					</a-input-number>
				</a-form-item>
				<!-- 编码块 -->
				<a-form-item :label="$t('Coding-block') + '(m)'" v-bind='formlayout'>
					<a-input-number v-decorator="['m', {
						rules: [{ required: true, message: $t('Enter') + $t('Coding-block') }]
					}]" style="width: 100%;" :placeholder="$t('Enter') + $t('Coding-block') + $t('Min-num-1')"
						@change="handleInputNumToInt('m', $event)" :min="1">
					</a-input-number>
				</a-form-item>
				<a-form-item :label="$t('Packet-size') + '(l)'" v-bind='formlayout' v-if="lr == true">
					<a-input-number v-decorator="['l', {
						rules: [{ required: true, message: $t('Enter') + $t('Packet-size') }, {
							validator: checknum
						}]
					}]" style="width: 100%;" :placeholder="$t('Enter') + $t('Packet-size')">
					</a-input-number>
				</a-form-item>
				<a-form-item :label="$t('Supported-failed-devices') + '(c)'" v-bind='formlayout' v-if="ss == true">
					<a-input v-decorator="['c', {
						rules: [{ required: true, message: $t('Enter') + $t('Supported-failed-devices') }]
					}]" style="width: 100%;" :placeholder="$t('Enter') + $t('Supported-failed-devices')">
					</a-input>
				</a-form-item>
				<a-form-item :label="$t('Failure-domain')" v-bind='formlayout'>
					<a-select v-decorator="['crush_failure_domain', {
						rules: [{ required: true, message: $t('Choose') + $t('Failure-domain') }]
					}]" @change="handleChange" :placeholder="$t('Choose') + $t('Failure-domain')">
						<!-- <a-select-option :value="item" v-for="(item,index) in basedata.failure_domains" :key="index">{{item}}</a-select-option> -->
						<a-select-option :value="item" v-for="(item, index) in failureDomains" :key="index">{{ item
						}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item :label="$t('Packet-failure-field')" v-bind='formlayout' v-if="lr == true">
					<a-select v-decorator="['locality']" @change="handleChange"
						:placeholder="$t('Choose') + $t('Packet-failure-field')">
						<!-- <a-select-option value=""></a-select-option> -->
						<!-- <a-select-option :value="item" v-for="(item,index) in basedata.failure_domains" :key="index">{{item}}</a-select-option> -->
						<a-select-option :value="item" v-for="(item, index) in failureDomains" :key="index">{{ item
						}}</a-select-option>
					</a-select>
				</a-form-item>

				<!-- <a-form-item :label="$t('Data-granularity')" v-bind='formlayout' v-if="jj == true">
			      	<a-input-number v-decorator="['packetsize',{
	                    rules:[{required:true,message:$t('Enter')+$t('Data-granularity')}],initialValue:2048
	                }]" style="width: 100%;" :placeholder="$t('Enter')+$t('Data-granularity')">
	                </a-input-number>
			    </a-form-item> -->

				<!-- <a-form-item label='Crush root' v-bind='formlayout'>
			      	<a-input v-decorator="['crush_root',{
	                    rules:[{required:true,message:$t('Enter')+'Crush root'}],initialValue:'default'
	                }]" style="width: 100%;" :placeholder="$t('Enter')+'Crush root'">
	                </a-input>
			    </a-form-item> -->
				<a-form-item :label="$t('Storage-device-type')" v-bind='formlayout'>
					<a-select v-decorator="['crush_device_class', {
						rules: [{ required: true, message: $t('Choose') + $t('Storage-device-type') }]
					}]" @change="handleChange" :placeholder="$t('Choose') + $t('Storage-device-type')">
						<!-- <a-select-option :value="item" v-for="(item,index) in basedata.devices" :key="index">{{item}}</a-select-option> -->
						<a-select-option :value="item" v-for="(item, index) in storageType" :key="index">{{ item
						}}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
	</a-row>
</template>

<script>
// import moment from 'moment';
// import ec from '../../../../static/images/svg/ic_EC_normal.svg'
// import edit from '../../../../static/images/svg/ic_edit02.svg'
// import del from '../../../../static/images/svg/ic_delete02.svg'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
	// template: '<a-icon :component = "ec,edit,del" />',
	components: { NoAuthPage },
	data() {
		return {
			form: this.$form.createForm(this),
			// ec,
			// edit,
			// del,
			add: false,
			jj: true,
			lr: false,
			ss: false,
			suredata: [],
			basedata: [],
			formlayout: {
				labelCol: { span: 8 },
				wrapperCol: { span: 14 }
			},
			pluginNames: ['jerasure', 'isa'],//'lrc','shec'
			failureDomains: ['osd', 'host', 'chassis', 'rack', 'row', 'pdu', 'pod', 'room', 'datacenter', 'zone', 'region', 'root'],
			storageType: [],
			tdetail: { "color": "#006db8", "font-weight": "bold", "border-bottom": "none", "border-top": "2px solid #006db8" },
			spinning: false,
		}
	},
	async mounted() {
		this.getdata()
		await this.getStorageList()
		// this.getbasedata()
	},
	methods: {
		getdata() {
			request('get', 'ops/conf/profile/').then(res => {
				// console.log('获取纠删码列表', res)
				this.suredata = res.data
			})
		},
		async getStorageList() {
			const { data } = await request('get', 'ops/osd/osd_class/')
			this.storageType = data
		},
		getbasedata() {
			request('get', 'ops/conf/ceph/ec_profile/_info').then(res => {
				this.basedata = res.data
			})
		},

		openmodal(name) {
			if (name == 'add')
				this.add = true
			else {
				this.$notification['error']({
					message: this.$t('Choose') + this.$t('Operating-object')
				})
			}
		},
		cancelhandle(e) {
			this.add = false
			this.spinning = false
			this.form.resetFields();
		},

		checknum(rule, value, callback) { //验证k必须是（k+m）/l的倍数
			const form = this.form;
			if (value && !Number.isInteger(form.getFieldValue('k') / ((form.getFieldValue('k') + form.getFieldValue('m')) / value))) {
				callback(this.$t('Ensure_k_format'));
			} else {
				callback();
			}
		},

		btnsub(e) {
			e.preventDefault();
			this.form.validateFields((err, value) => {
				if (!err) {
					this.spinning = true;
					const params = {
						name: value.name, //配件名称
						plugin: value.plugin, //插件
						k: Math.floor(value.k), //数据块
						m: Math.floor(value.m), //编码块
						crush_failure_domain: value.crush_failure_domain, //失效域
						crush_device_class: value.crush_device_class, //存储设备类型
					}
					request('put', 'ops/conf/profile/', params).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false
						this.add = false
						this.form.resetFields();
						this.getdata()
					})
				}
			})
		},

		changePlugin(value) {
			if (value == 'jerasure') {
				// this.jj = true 暂时不用
			} else {
				this.jj = false
			}
			if (value == 'lrc') {
				// this.lr = true 暂时不用
			} else {
				this.lr = false
			}
			if (value == 'shec') {
				// this.ss = true 暂时不用
			} else {
				this.ss = false
			}
		},

		// 删除纠删码配置
		delsure(name) {
			request('DELETE', 'ops/conf/profile/', {
				// data:{
				name: name
				// }
			}).then(res => {
				this.model(res.data.id) //返回模板
				this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
				// this.gettask()  //任务栏信息
				this.getdata()
			})
		},
		handleChange(value) {
		},

		// 将小数向下取整
		handleInputNumToInt(type, value) {
			this.$nextTick(() => {
				this.form.setFieldsValue({
					[type]: Math.floor(value),
				})
			})
		},
	}
}
</script>

<style scoped>
ul li {
	list-style: none;
}

ul {
	margin-bottom: 2em;
}

.title {
	color: burlywood;
	font-weight: bold;
}

.bg {
	box-shadow: 0px 2px 8px #ccc;
	margin-bottom: 1em
}

.box {
	overflow: hidden;
}

.cardbox {
	margin: 0 !important;
	overflow: hidden;
}

.list {
	float: left;
	/* background-color: #f1f8ff; */
	width: 43%;
	margin-right: 5%;
	margin-bottom: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.listspan {
	padding: 0.3em 0.5em;
	margin-right: 1em;
	display: inline-block;
	/* background-color: #e6f4ff; */
	/* width: 8em; */
}

.del-icon {
	cursor: pointer;
	color: var(--themeColor);
}

.add-fill-icon {
	margin: 26px 0 55px;
	font-size: 120px;
	color: var(--themeColor);
	cursor: pointer;
}
</style>
